<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../img/asset-favico.ico">
    <title>编辑信息</title>
    <link rel="stylesheet" href="../css/page-health-orderInfo.css" />
    <link rel="stylesheet" href="../plugins/elementui/index.css" />
    <script src="../plugins/jquery/dist/jquery.min.js"></script>
    <script src="../plugins/healthmobile.js"></script>
    <script src="../plugins/datapicker/datePicker.js"></script>
    <script src="../plugins/vue/vue.js"></script>
    <script src="../plugins/vue/axios-0.18.0.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script>
        var id = getUrlParam("id");//根据URL地址栏中的参数名称获取对应的值
    </script>
</head>
<body data-spy="scroll" data-target="#myNavbar" data-offset="150">
<div id="app" class="app">
    <!-- 页面头部 -->
    <div class="top-header">
        <span class="f-left"><i class="icon-back" onclick="history.go(-1)"></i></span>
        <span class="center">预约记录</span>
        <span class="f-right"><i class="icon-more"></i></span>
    </div>

    <!-- 页面内容 -->
    <div class="">
        <div class="query-form" style="padding: 20px 0 0 0;background-color: #fff;">
            <el-form ref="form" :model="queryForm" style="background-color: #fff;position: relative;">
                <el-form-item label="开始日期" prop="daterange" style="padding: 10px 0 0 20px;">
                    <el-date-picker
                        v-model="queryForm.startDate"
                        type="date"
                        placeholder="请选择开始日期"
                        value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束日期" prop="daterange" style="padding: 0 0 60px 20px;">
                    <el-date-picker
                        v-model="queryForm.endDate"
                        type="date"
                        placeholder="请选择结束日期"
                        value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item style="position: absolute;right: 15px;bottom: -10px;">
                    <el-button size="mini" @click="searchBtnClick">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 内容部分 -->
        <div style="">
            <div v-for="item in dataList" style="background-color: #fff;">
                <div class="content" style="display: flex;flex-direction: row;margin-bottom: 10px;">
                    <div class="pic" style="margin-right: 20px;">
                        <img src="../img/widget-nav-2.png" alt="" style="height: 80px; width: 80px;border-radius: 40px;margin-top: 30px;">
                    </div>
                    <a :href="'orderSearch_detail.html?id='+item.orderId">
                    <div class="content-content" style="display: flex;flex-direction: column;padding-top: 20px;">
                        <div class="name" style="color: blue;font-weight: bold;">体检人：{{item.orderName}}</div>
                        <div class="set" style="color: blue"><span style="white-space:nowrap;display:inline-block;width:240px;text-overflow:ellipsis;overflow:hidden;">预约套餐：{{item.setmealName}}</span> </div>
                        <div class="detail" style="font-size: 12px;color:#666;">{{"点击查看预约详情"}}</div>
                    </div>
                </a>
                </div>
                <div class="line" style="height: 0;margin: 0 10px;border: 1px solid #eee;"></div>
            </div>
        </div>
    </div>
</div>
<script>
    var vue = new Vue({
        el:'#app',
        data:{
            queryForm: {
                startDate: '',
                endDate: '',
            },

            dataList: [],

        },
        methods:{
            //根据时间段查询
            searchBtnClick(){
                console.log("qur",this.queryForm)
                let self = this;
                let params = {
                    startDate: this.queryForm.startDate,
                    endDate: this.queryForm.endDate,
                };

                //发送ajax请求,根据传过来的时间段进行查询
                axios.get("/member/findByDateAndTelephone.do", {params: params})
                    .then(res => {
                        //为 self.dataList赋值
                        if(res.data.flag){
                        this.dataList=res.data.data;
                        }
                    })
            },
        },

        //查询所有
        mounted() {
            axios.post("/member/findAll.do").then(res=>{

                /*console.log(res.data.data);
                console.log(this.dataList);
                for (ele of this.dataList){
                    console.log(ele.name);
                }*/
                if(res.data.flag) {
                    //console.log(res.data.data);
                    this.dataList=res.data.data;
                }

            })
        }
    });
</script>

<script>
    export default {
        data() {
            return {
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                },
                value1: '',
            };
        }
    };
</script>
</body>
</html>